<template>
  <div class="musiclist">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="item.label" :name="item.name" v-for="item in tabs" :key="item.name">
      </el-tab-pane>
    </el-tabs>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: '/find_music/rtstyle',
      tabs: [
        { label: '个性推荐', name: '/find_music/rtstyle' },
        { label: '歌单', name: '/find_music/rtsongs' },
        { label: '主播电台', name: '/find_music/dj' },
        { label: '排行榜', name: '/find_music/rtlist' },
        { label: '歌手', name: '/find_music/rtsinger' },
        { label: '最新音乐', name: '/find_music/rtnewsing' }
      ]
    }
  },
  methods: {
    handleClick (tab, event, name) {
      this.activeName = name
      this.$router.replace(tab.name)
    }
  },
  created () {
    console.log(this.$route.path)
    this.activeName = this.$route.path
  }
}
</script>

<style lang="less" scoped>
  .musiclist {
    width: 82%;
    height: auto;
    text-align: center;
    overflow-y: scroll;
    .el-tabs {
      width: 90%;
      margin: 15px auto;
      display: flex;
      justify-content: center;
      // border-bottom: 2px solid #e4e7ed;
    }
  }
</style>
